<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div>
        <a-card :bordered="false">
            <div class="table-page-search-wrapper">
                <a-form layout="horizontal" >
                    <a-row :gutter="8">
                        <a-col :md="8" :sm="24">
                            <a-form-item label="业务类型"  :labelCol="labelCol" :wrapperCol="wrapperCol">
                                <a-select
                                        placeholder="请选择"
                                        allowClear
                                        v-model="queryParam.operationType"
                                >
                                    <a-select-option v-for="item in dictData.operationType" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="24">
                            <a-form-item label="标识"   :labelCol="labelCol" :wrapperCol="wrapperCol">
                                <a-input v-model="queryParam.key" placeholder="流程key"/>
                            </a-form-item>
                        </a-col>
                        <template v-if="advanced">
                            <a-col :md="8" :sm="24">
                                <a-form-item label="流程名称"   :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-input v-model="queryParam.name" placeholder="流程名称"/>
                                </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                                <a-form-item label="查询历史版本" :labelCol="{
                                    xs: { span: 24 },
                                    sm: { span: 8 }
                                }" :wrapperCol="{
                                    xs: { span: 24 },
                                    sm: { span: 16 }
                                }">
                                    <a-select v-model="queryParam.queryFlag" placeholder="请选择" allowClear default-value="0">
                                        <a-select-option value="0">否</a-select-option>
                                        <a-select-option value="1">是</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </template>
                        <a-col :md="8" :sm="24">
                            <span class="table-page-search-submitButtons"  :md="!advanced && 8 || 24" :sm="24">
                                <a-button type="primary" @click="() =>{this.findProcessListBtn()}">查询</a-button>
                                <a-button style="margin-left: 8px" @click="() => {this.clearQueryAll()}">重置</a-button>
                                <a @click="toggleAdvanced" style="margin-left: 8px">
                                    {{ advanced ? '收起' : '展开' }}
                                    <a-icon :type="advanced ? 'up' : 'down'"/>
                                </a>
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <vxe-grid
                    class="vxe-table-antd"
                    resizable
                    show-overflow
                    ref="itemFlowTable"
                    stripe
                    border
                    highlight-hover-row
                    highlight-current-row
                    highlight-hover-column
                    highlight-current-column
                    highlight-cell
                    row-id="id"
                    height="400"
                    size="small"
                    :columns="tableColumn"
                    :data="tableData"
                    :loading="loading"
                    :start-index="(tablePage.currentPage - 1) * tablePage.pageSize"
                    :pager-config="tablePage"
                    @page-change="handlePageChange">
                <!--自定义插槽 toolbar 插槽-->
                <template v-slot:xml_default="{ row }">
                    <span style="color:blue;cursor: pointer;" @click="showXmlDrawer(row.id)">{{row.name}}.bpmn20.xml</span>
                </template>
                <template v-slot:thumbnail_default="{ row }">
                    <span style="color:blue;cursor: pointer;" @click="showImgDrawer(row.id)">{{row.name}}.png</span>
                </template>
                <template v-slot:version_default="{ row }">
                    <a-tooltip placement="top">
                        <span style="color:blue;cursor: pointer;" >V:{{row.version}}</span>
                    </a-tooltip>
                </template>
                <template v-slot:state_default="{ row }">
                    <a-tooltip placement="top">
                        <template slot="title">
                            <span>当前状态</span>
                        </template>
                        <span style="cursor: pointer;" >{{row.suspensionState=='1'? '激活' : '暂停'}}</span>
                    </a-tooltip>
                </template>
                <template v-slot:edit_default="{ row }">
                    <a-tooltip placement="top">
                        <template slot="title">
                            <span>{{row.suspensionState=='1'? '暂停' : '激活'}}</span>
                        </template>
                        <a-icon style="padding-right:10px;color: #0000FF;cursor: pointer;"  :type="row.suspensionState=='1'? 'pause-circle' : 'play-circle'" @click="changeFlowState(row.id,row.suspensionState)" ></a-icon>
                    </a-tooltip>
                    <a-tooltip placement="top">
                        <template slot="title">
                            <span>下载流程文件</span>
                        </template>
                        <a-icon style="padding-right:10px;color: #0000FF;cursor: pointer;"  type="download" @click="downloadXmlBtn(row)" ></a-icon>
                    </a-tooltip>
                    <a-tooltip placement="top">
                        <template slot="title">
                            <span>删除流程</span>
                        </template>
                        <a-popconfirm
                                placement="left"
                                title="是否确定删除该流程?"
                                ok-text="确定"
                                cancel-text="取消"
                                @confirm="delConfirm(row.id)"
                        >
                            <a-icon style="padding-right:10px;color: #FF0000;cursor: pointer;" theme="filled" type="delete" ></a-icon>
                        </a-popconfirm>
                    </a-tooltip>
                    <a-tooltip placement="top">
                        <template slot="title">
                            <span>元素查询</span>
                        </template>
                        <a-icon style="padding-right:10px;color: #0000FF;cursor: pointer;"  type="search" @click="queryFlowNode(row)" ></a-icon>
                    </a-tooltip>
                </template>
            </vxe-grid>
        </a-card>
        <a-drawer
                placement="right"
                :closable="true"
                :destroyOnClose="true"
                width="85%"
                :visible="xmlVisible"
                @close="onXmlClose"
        >
          <pre v-highlight>
            <code >{{xmlValue}}</code>
          </pre>
        </a-drawer>
        <a-drawer
                placement="right"
                :closable="true"
                :destroyOnClose="true"
                width="85%"
                :visible="imgVisible"
                @close="onImgClose"
        >
            <img :src="imgSrc" />
        </a-drawer>
        <a-drawer
                placement="left"
                :closable="true"
                :destroyOnClose="true"
                width="60%"
                :visible="nodeVisible"
                @close="onNodeClose"
        >
            <vxe-grid
                    class="vxe-table-antd"
                    resizable
                    show-overflow
                    ref="modelListTable"
                    stripe
                    border
                    highlight-hover-row
                    highlight-current-row
                    highlight-hover-column
                    highlight-current-column
                    highlight-cell
                    row-id="id"
                    height="400"
                    size="small"
                    :columns="tableNodeColumn"
                    :data="tableNodeData"
                    :loading="loadingNode"
            >
                <template v-slot:edit_node="{ row }">
                    <a-tooltip placement="top">
                        <template slot="title">
                            <span>元素配置</span>
                        </template>
                        <a-icon style="padding-right:10px;color: #0000FF;cursor: pointer;"  type="edit" @click="editBtn(row)" ></a-icon>
                    </a-tooltip>
                    <a-tooltip placement="top">
                        <template slot="title">
                            <span>元素签收关系配置</span>
                        </template>
                        <a-icon style="padding-right:10px;color: #0000FF;cursor: pointer;"  type="setting" @click="openAssBtn(row)" ></a-icon>
                    </a-tooltip>
                </template>
            </vxe-grid>
            <a-drawer
                    placement="left"
                    :closable="true"
                    :destroyOnClose="true"
                    :title="assTitle"
                    width="50%"
                    :visible="assVisible"
                    @close="onAssClose"
            >
                <vxe-toolbar>
                    <template v-slot:buttons>
                        <vxe-button @click="insertEvent(-1)">新增</vxe-button>
                    </template>
                </vxe-toolbar>
                <vxe-grid
                        class="vxe-table-antd"
                        resizable
                        show-overflow
                        ref="asslListTable"
                        stripe
                        border
                        highlight-hover-row
                        highlight-current-row
                        highlight-hover-column
                        highlight-current-column
                        highlight-cell
                        height="400"
                        size="small"
                        :columns="tableAssColumn"
                        :data="tableAssData"
                        :loading="loadingAss"
                        :edit-config="{trigger: 'manual', mode: 'row'}"
                >
                    <template v-slot:ass_id="{ row }">
                        <a-select
                                placeholder="请选择"
                                allowClear
                                show-search
                                @search="assIdSearch"
                                v-model="row.assigneeId"
                                :filterOption="filterOption"
                                @change="assigneeIdChange"
                        >
                            <a-select-option v-for="item in assIdDict" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
                        </a-select>
                    </template>
                    <template v-slot:ass_userid="{ row }">
                        <a-select
                                placeholder="请选择"
                                allowClear
                                show-search
                                @search="assUserIdSearch"
                                v-model="row.userId"
                                :filterOption="filterOption"
                                @change="userIdChange"
                        >
                            <a-select-option v-for="item in userDict" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
                        </a-select>
                    </template>
                    <template v-slot:save_ass="{ row }">
                        <a-icon style="padding-right:10px;color: #0000FF;cursor: pointer;"  type="edit" @click="editRow(row)" ></a-icon>
                        <a-tooltip placement="top">
                            <template slot="title">
                                <span>元素签收关系保存</span>
                            </template>
                            <a-icon style="padding-right:10px;color: #0000FF;cursor: pointer;"  type="save" @click="editAss(row)" ></a-icon>
                        </a-tooltip>
                        <a-tooltip placement="top">
                            <template slot="title">
                                <span>元素签收关系删除</span>
                            </template>
                            <a-icon style="padding-right:10px;color: #0000FF;cursor: pointer;"  type="delete" @click="delAss(row)" ></a-icon>
                        </a-tooltip>
                    </template>
                </vxe-grid>
            </a-drawer>
        </a-drawer>
        <a-modal
                :title="modalTitle"
                centered
                style="top: 10px;"
                width="40%"
                destroyOnClose
                v-model="updateNodeVisible"
                @ok="updateNode"
                cancelText="关闭"
                okText="保存"
        >
            <a-form-model ref="modelPage" :model="nodeForm"  :label-col="nodeLabelCol" :wrapper-col="nodeWrapperCol">
                <a-form-model-item label="节点页面还原组件">
                    <a-input v-model="nodeForm.rePage" />
                </a-form-model-item>
                <a-form-model-item label="签收人类型" >
                    <a-select
                            placeholder="请选择"
                            allowClear
                            v-model="nodeForm.assigneeType"
                            @change="nodeAssChange"
                    >
                        <a-select-option v-for="item in dictData.assigneeType" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="自动审核标识" >
                    <a-select
                            placeholder="请选择"
                            allowClear
                            v-model="nodeForm.automaticFlag"
                    >
                        <a-select-option v-for="item in dictData.automaticFlag" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="是否会签" >
                    <a-select
                            placeholder="请选择"
                            allowClear
                            v-model="nodeForm.countersignFlag"
                    >
                        <a-select-option v-for="item in dictData.countersignFlag" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="会签流转条件类型" >
                    <a-select
                            placeholder="请选择"
                            allowClear
                            v-model="nodeForm.countersignType"
                    >
                        <a-select-option v-for="item in dictData.countersignType" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="会签条件人数">
                    <a-input v-model="nodeForm.countersignNum" />
                </a-form-model-item>
                <a-form-model-item label="流转类型" >
                    <a-select
                            placeholder="请选择"
                            allowClear
                            v-model="nodeForm.moveType"
                    >
                        <a-select-option v-for="item in dictData.moveType" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="默认签收类型ID">
                    <a-select
                            placeholder="请选择"
                            allowClear
                            v-model="nodeForm.assigneeId"
                    >
                        <a-select-option v-for="item in nodeAssIdDict" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="默认签收用户">
                    <a-select
                            placeholder="请选择"
                            allowClear
                            v-model="nodeForm.userId"
                    >
                        <a-select-option v-for="item in nodeUserIdDict" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="调用方法代码">
                    <a-input v-model="nodeForm.functionCode" />
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>
<script>
    import { getProcessList,getProcessXml,getProcessImage,editProcessState,downloadProcessXml,delProcess,queryFlowNode,updateFlowNode,getAssigneeList,saveAssignee,delAssignee } from "@/services/system/workflowApi"
    import { getBatchDict,getDictList,getUserDict,getUserDetail,getOrgDict,getRoleDict,getOrgDetail,getRoleDetail,getUserDictByOrgId} from "@/services/system/api"
    import modal from 'ant-design-vue/es/modal'
    import vkbeautify from 'vkbeautify'
    export default {
        name: 'ItemFlow',
        components: {
        },
        data () {
            return {
                dictData: {},
                // 高级搜索 展开/关闭
                advanced: false,
                modalTitle:'元素信息配置',
                assTitle:'元素签收关系配置',
                // 查询参数
                queryParam:{operationType:'',name:'',key:'',queryFlag:''},
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 6 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 18 }
                },
                nodeLabelCol: {
                    xs: { span: 24 },
                    sm: { span: 8 }
                },
                nodeWrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 }
                },
                tableColumn: [
                    { type: 'seq', width: 60, fixed: 'left', align: 'center', title: '序号' },
                    { field: 'id', title: '主键', fixed: 'left', visible: false, align: 'center', width: 150 },
                    { field: 'deploymentId', title: '部署ID', fixed: 'left', visible: true, align: 'center', width: 150 },
                    { field: 'category', title: '业务类型', align: 'center', fixed: 'left', width: 200 },
                    { field: 'categoryName', title: '业务类型名称', align: 'center', width: 120 },
                    { field: 'key', title: '标识', align: 'center',  width: 120 },
                    { field: 'resourceName', title: '模型XML', align: 'center',  width: 100 ,slots: {default: 'xml_default'}},
                    { field: 'dgrmResourceName', title: '流程图', align: 'center',  width: 100 ,slots: {default: 'thumbnail_default'}},
                    { field: 'version', title: '版本号', align: 'center',  width: 80 ,slots: {default: 'version_default'}},
                    { field: 'suspensionState', title: '暂停状态', align: 'center',  width: 80,slots: {default: 'state_default'} },
                    { field: 'edit', title: '操作', align: 'center',  width: 120,fixed: 'right',slots: {default: 'edit_default'} }
                ],
                tableData: [],
                loading: false,
                tablePage: {
                    total: 0,
                    currentPage: 1,
                    pageNum: 1,
                    pageSize: 20
                },
                processData:{},
                xmlVisible:false,
                xmlValue:'',
                imgVisible:false,
                imgSrc:'',
                nodeVisible:false,
                tableNodeData:[],
                tableNodeColumn: [
                    { type: 'seq', width: 60, fixed: 'left', align: 'center', title: '序号' },
                    { field: 'id', title: '主键',  visible: false, align: 'center', width: 150 },
                    { field: 'deploymentId', title: '部署Id',  visible: false, align: 'center', width: 100 },
                    { field: 'procDefId', title: '流程定义Id', visible: false, align: 'center', width: 150 },
                    { field: 'actId', title: '元素id',  visible: false, align: 'center', width: 150 },
                    { field: 'actName', title: '流程元素名称',fixed: 'left', visible: true, align: 'center', width: 100 },
                    { field: 'actType', title: '流程元素类型', visible: true, align: 'center', width: 80 },
                    { field: 'opType', title: '业务类型代码',  visible: true, align: 'center', width: 100 },
                    { field: 'opName', title: '业务类型名称',visible: true, align: 'center', width: 150 },
                    { field: 'rePage', title: '节点页面还原组件', visible: true, align: 'center', width: 150 },
                    { field: 'assigneeType', title: '签收人类型', visible: false,align: 'center', width: 150 },
                    { field: 'assigneeTypeName', title: '签收人类型', visible: true,align: 'center', width: 150 },
                    { field: 'automaticFlag', title: '自动审核标识', visible: false, align: 'center', width: 150 },
                    { field: 'automaticFlagName', title: '自动审核标识', visible: true, align: 'center', width: 150 },
                    { field: 'countersignFlag', title: '是否会签', visible: false, align: 'center', width: 150 },
                    { field: 'countersignFlagName', title: '是否会签', visible: true, align: 'center', width: 150 },
                    { field: 'countersignType', title: '会签流转条件类型', visible: false, align: 'center', width: 150 },
                    { field: 'countersignTypeName', title: '会签流转条件类型', visible: true, align: 'center', width: 150 },
                    { field: 'countersignNum', title: '会签条件人数', visible: true, align: 'center', width: 150 },
                    { field: 'moveType', title: '流转类型',  visible: false, align: 'center', width: 150 },
                    { field: 'moveTypeName', title: '流转类型',  visible: true, align: 'center', width: 150 },
                    { field: 'assigneeId', title: '默认签收类型ID',  visible: true, align: 'center', width: 150 },
                    { field: 'userId', title: '默认签收用户',  visible: true, align: 'center', width: 150 },
                    { field: 'functionCode', title: '调用方法代码',  visible: true, align: 'center', width: 150 },
                    { field: 'save', title: '操作', align: 'center',  width: 80,fixed: 'right',slots: {default: 'edit_node'} }
                ],
                loadingNode: false,
                updateNodeVisible:false,
                nodeForm:{id:'',deploymentId:'',procDefId:'',actId:'',actName:'',actType:'',opType:'',opName:'',rePage:'',assigneeType:'',
                    automaticFlag:'',moveType:'',assigneeId:'',userId:'',functionCode:'',countersignFlag:'',countersignType:'',countersignNum:''},
                tableAssColumn:[
                    { type: 'seq', width: 60, fixed: 'left', align: 'center', title: '序号' },
                    { field: 'id', title: '主键',  visible: false, align: 'center', width: 150 },
                    { field: 'nodeId', title: '系统流程节点信息表主键',  visible: false, align: 'center', width: 100 },
                    { field: 'assigneeType', title: '签收人类型',  visible: true, align: 'center', width: 100,editRender:{name: 'ASelect',options:[],optionProps:{value:'dictKey',label:'dictValue'},events: {change:this.assigneeTypeChange }}},
                    { field: 'assigneeId', title: '签收类型id',  visible: false, align: 'center', width: 100},
                    { field: 'assigneeIdName', title: '签收类型id名称',  visible: true, align: 'center', width: 200,editRender:{},slots: {edit: 'ass_id'} },
                    { field: 'userId', title: '签收用户',  visible: false, align: 'center', width: 100},
                    { field: 'userIdName', title: '签收用户名称',  visible: true, align: 'center', width: 150,editRender:{},slots: {edit: 'ass_userid'} },
                    { field: 'save', title: '操作', align: 'center',  width: 120,fixed: 'right',slots: {default: 'save_ass'} }
                ],
                tableAssData:[],
                loadingAss:false,
                assVisible:false,
                nodeId:'',
                tableAssPage: {
                    total: 0,
                    currentPage: 1,
                    pageNum: 1,
                    pageSize: 20
                },
                //当前编辑行数据
                assForm:{id:'',nodeId:'',assigneeType:'',assigneeId:'',userId:''},
                //签收人字典码
                assIdDict:[],
                //用户字典码
                userDict:[],
                //是否允许新增
                addAssFlag:true,
                //当前行流转类型
                moveType:'',
                //默认签收人id字典
                nodeAssIdDict:[],
                //默认签收用户id字典
                nodeUserIdDict:[],

            }
        },
        mounted(){

        },
        created () {
            // 数据初始化
            const params = {}
            params.dictFields = 'operationType,assigneeType,automaticFlag,moveType,countersignFlag,countersignType'
            this.$http.post(getBatchDict,params).then(res => {
                this.dictData = res.result;
                console.log(this.dictData.assigneeType);
                this.tableAssColumn[3].editRender.options = this.dictData.assigneeType;
            })
        },
        methods: {
            //节点自动审核签收人类型改变
            nodeAssChange(){
                this.nodeAssIdDict=[];
                this.assIdDict=[];
                const  param={};
                if(this.nodeForm.assigneeType=='1'){
                    //获取用户数据字典
                    param.permissionFlag=false;
                    this.$http.post(getUserDict,param).then((res) => {
                        this.nodeAssIdDict= res.result;
                    }).catch(() => {

                    })
                }
                if(this.nodeForm.assigneeType=='2'){
                    const  param={};
                    param.permissionFlag=false;
                    this.$http.post(getOrgDict,param).then((res) => {
                        this.nodeAssIdDict= res.result;
                    }).catch(() => {

                    })
                }
                if(this.nodeForm.assigneeType=='3'){
                    const  param={};
                    param.permissionFlag=false;
                    param.status="1";
                    this.$http.post(getRoleDict,param).then((res) => {
                        this.assIdDict= res.result;
                    }).catch(() => {

                    })
                }
            },
            //模糊查询过滤器
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
            //模糊下拉
            assIdSearch(keyword){
                const  param={};
                param.permissionFlag=false;
                if(this.assForm.assigneeType=='1'){
                    param.searchText=keyword;
                    this.$http.post(getUserDict,param).then((res) => {
                        this.assIdDict= res.result;
                    }).catch(() => {

                    })
                }
                if(this.assForm.assigneeType=='2'){
                    param.searchText=keyword;
                    this.$http.post(getOrgDict,param).then((res) => {
                        this.assIdDict= res.result;
                    }).catch(() => {

                    })
                }
                if(this.assForm.assigneeType=='3'){
                    param.roleName=keyword;
                    param.status="1";
                    this.$http.post(getRoleDict,param).then((res) => {
                        this.assIdDict= res.result;
                    }).catch(() => {

                    })
                }
            },
            //模糊下拉
            assUserIdSearch(keyword){
                const  param={};
                param.permissionFlag=false;
                param.searchText=keyword;
                param.orgId=this.assForm.assigneeId;
                //签收类型为组织的时候模糊下拉用户
                if(this.assForm.assigneeType=='2'){
                    this.$http.post(getUserDictByOrgId,param).then((res) => {
                        this.userDict= res.result;

                    }).catch(() => {

                    })
                }
            },
            //激活编辑行
            editRow(row){
                this.$refs.asslListTable.setActiveRow(row);
                //获取当前编辑前行数据
                this.assForm=row;
                this.assIdDict=[];
                this.userDict=[];
                //根据原签收类型加载签收人字典
                if(row.assigneeType=='1'){
                    const  param={};
                    param.permissionFlag=false;
                    this.$http.post(getUserDict,param).then((res) => {
                        this.assIdDict= res.result;
                    }).catch(() => {

                    })
                }
                if(row.assigneeType=='2'){
                    const  param={};
                    param.permissionFlag=false;
                    this.$http.post(getOrgDict,param).then((res) => {
                        this.assIdDict= res.result;
                    }).catch(() => {

                    })
                    const  param2={};
                    param2.permissionFlag=false;
                    this.$http.post(getUserDict,param2).then((res) => {
                        this.userDict= res.result;
                    }).catch(() => {

                    })
                }
                if(row.assigneeType=='3'){
                    const  param={};
                    param.permissionFlag=false;
                    param.status="1";
                    this.$http.post(getRoleDict,param).then((res) => {
                        this.assIdDict= res.result;
                    }).catch(() => {

                    })
                }
            },
            //根据签收类型获取对应字典码
            assigneeTypeChange({row},value){
                this.userDict=[];
                console.log(row)
                console.log(value)
                //获取用户列表
                if(value=='1'){
                    const  param={};
                    param.permissionFlag=false;
                    this.$http.post(getUserDict,param).then((res) => {
                        this.assIdDict= res.result;
                    }).catch(() => {

                    })
                    let data = [...this.tableAssData]
                    data.forEach((item) => {
                        if (item.id === this.assForm.id) {
                            item.userId="";
                            item.userIdName="";
                            return item
                        }
                    })
                    this.tableAssData = data
                }
                //获取组织列表
                if(value=='2'){
                    const  param={};
                    param.permissionFlag=false;
                    this.$http.post(getOrgDict,param).then((res) => {
                        this.assIdDict= res.result;
                    }).catch(() => {

                    })
                }
                //获取角色列表
                if(value=='3'){
                    const  param={};
                    param.permissionFlag=false;
                    this.$http.post(getRoleDict,param).then((res) => {
                        this.assIdDict= res.result;
                    }).catch(() => {

                    })
                    let data = [...this.tableAssData]
                    data.forEach((item) => {
                        if (item.id === this.assForm.id) {
                            item.userId="";
                            item.userIdName="";
                            return item
                        }
                    })
                    this.tableAssData = data
                }
            },
            //根据签收类型和组织id获取用户列表
            assigneeIdChange(){
                let assForm ={...this.assForm}
                let data = [...this.tableAssData]
                data.forEach((item) => {
                    if (item.id === assForm.id) {
                        var assigneeType=assForm.assigneeType;
                        if(assigneeType=='1'){
                            const  param={};
                            param.userId=assForm.assigneeId;
                            this.$http.post(getUserDetail,param).then((res) => {
                                item.assigneeIdName=res.result.fullName;
                            }).catch(() => {

                            })
                        }
                        if(assigneeType=='2'){
                            const  param={};
                            param.orgId=assForm.assigneeId;
                            this.$http.post(getOrgDetail,param).then((res) => {
                                item.assigneeIdName=res.result.orgName;
                            }).catch(() => {

                            })

                            const  param2={};
                            param2.permissionFlag=false;
                            param2.orgId=assForm.assigneeId;
                            this.$http.post(getUserDictByOrgId,param2).then((res) => {
                                this.userDict= res.result;
                            }).catch(() => {

                            })
                        }
                        if(assigneeType=='3'){
                            const  param={};
                            param.roleId=assForm.assigneeId;
                            this.$http.post(getRoleDetail,param).then((res) => {
                                item.assigneeIdName=res.result.roleName;
                            }).catch(() => {

                            })
                        }
                        return item
                    }
                })
                this.tableAssData = data


            },
            //根据用户id获取用户名称
            userIdChange(){
                let assForm ={...this.assForm}
                let data = [...this.tableAssData]
                var assigneeType=assForm.assigneeType;
                if(assigneeType=='2') {
                    data.forEach((item) => {
                        if (item.id === assForm.id) {
                            const param = {};
                            param.userId = assForm.userId;
                            this.$http.post(getUserDetail, param).then((res) => {
                                item.userIdName = res.result.fullName;
                            }).catch(() => {

                            })
                            return item
                        }
                    })
                    this.tableAssData = data
                }
            },
            //删除元素签收关系
            delAss(row){
                var id=row.id;
                if(id==null){
                    this.$refs.asslListTable.remove(row);
                    let data = [...this.tableAssData]
                    data.forEach((item,index) => {
                        if (item.id === id) {
                            data.pop(index);
                        }
                    })
                    this.tableAssData = data;
                    console.log(this.tableAssData);
                    alert("签收关系删除成功");
                }else{
                    this.$http.post(delAssignee,row).then(() => {
                        this.$refs.asslListTable.remove(row);
                        let data = [...this.tableAssData]
                        data.forEach((item,index) => {
                            if (item.id === id) {
                                data.pop(index);
                            }
                        })
                        this.tableAssData = data;
                        console.log(this.tableAssData);
                        alert("签收关系删除成功");
                    }).catch(() => {

                    })
                }
            },
            //编辑元素签收关系
            editAss(row){
                const params=row;
                params.nodeId=this.nodeId;
                this.$http.post(saveAssignee,params).then((res)=>{
                        alert("签收关系保存成功")
                        console.log(res.result.id);
                        //是否允许新增标记
                        if(row.id==undefined){
                            this.addAssFlag=true;
                        }
                        let data = [...this.tableAssData]
                        data.forEach((item) => {
                            if (item.id === undefined) {
                                item.id=res.result.id;
                                return item
                            }
                        })
                        this.tableAssData = data;
                    }
                ).catch(() => {

                });
            },
            //新增元素签收关系
            async insertEvent (row) {
                if(this.addAssFlag==false){
                    alert("新增签收关系未保存不允许新增")
                }else{
                    this.assIdDict=[];
                    this.userDict=[];
                    let record = {
                        nodeId: this.nodeId
                    }
                    const { row: newRow } = await this.$refs.asslListTable.insertAt(record, row)
                    await this.$refs.asslListTable.setActiveRow(newRow)
                    //获取当前编辑前行数据
                    this.assForm=newRow
                    let data = [...this.tableAssData]
                    data.push(this.assForm)
                    this.tableAssData = data;
                    this.addAssFlag=false;
                }
            },
            //关闭元素签收关系窗口
            onAssClose(){
                this.assVisible=false;
            },
            //打开元素签收关系窗口
            openAssBtn(row){
                this.addAssFlag=true;
                const params = Object.assign(this.tableAssPage)
                params.nodeId=row.id;
                this.nodeId=row.id;
                if(row.moveType==undefined||row.moveType==''){
                    alert("请先选择流转类型");
                }else{
                    var assigneeType='1';
                    if(row.moveType=='4'){
                        assigneeType='2';
                    }
                    if(row.moveType=='5'){
                        assigneeType='3';
                    }
                    // 数据初始化
                    const params = {
                        "dictField": "ASSIGNEETYPE",
                        "dictKey": assigneeType,
                        "status": "1"
                    }
                    this.$http.post(getDictList,params).then(res => {
                        this.tableAssColumn[3].editRender.options = res.result.list;
                    });
                    const param={
                        nodeId: row.id,
                    }
                    this.$http.post(getAssigneeList,param).then((res) => {
                        this.tableAssData=res.result;
                        this.assTitle=row.actName+'元素签收关系信息配置';
                        this.assVisible=true;
                    }).catch(() => {

                    })
                }
            },
            //更新流程元素信息
            updateNode(){
                const params ={...this.nodeForm}
                if(this.moveType!=params.moveType){
                    if(confirm('更改流转类型将删除原流转类型的签收关系,是否继续更改？')==true){
                        this.$http.post(updateFlowNode,params).then((res) => {
                            console.log(res.result);
                            this.updateNodeVisible=false;
                            this.queryFlowNode(res.result);
                        }).catch(() => {

                        })
                    }
                }else{
                    this.$http.post(updateFlowNode,params).then((res) => {
                        console.log(res.result);
                        this.updateNodeVisible=false;
                        this.queryFlowNode(res.result);
                    }).catch(() => {

                    })
                }
            },
            //打开编辑节点信息窗口
            editBtn(row){
                this.moveType=row.moveType;
                this.modalTitle=row.actName+"元素信息配置";
                this.updateNodeVisible = true;
                this.nodeForm={...row};
            },
            //关闭节点元素信息窗口
            onNodeClose(){
                this.nodeVisible=false;
            },
            //查询流程元素信息
            queryFlowNode(row){
                const params ={}
                params.deploymentId=row.deploymentId;
                this.$http.post(queryFlowNode,params).then((res) => {
                    this.tableNodeData=res.result;
                    this.nodeVisible=true;
                }).catch(() => {

                })
            },
            //删除流程定义信息包括实例
            delConfirm(id){
                setTimeout(() => {
                    const params = {}
                    params.id = id
                    this.$http.post(delProcess,params).then(() => {
                        modal.info({ title: '成功提示', content: '删除流程成功' })
                        this.clearQueryAll()
                    }).catch(() => {

                    })
                }, 200)
            },
            //下载xml文件
            downloadXmlBtn(row){
                let url =downloadProcessXml+'?time=' + new Date().getTime()
                url=url.replace('{id}',row.id)
                console.log(url);
                console.log(fileName);
                let fileName =row.resourceName;
                this.$http.downloadFile(url,fileName,{})
            },
            //关闭图片窗口
            onImgClose(){
                this.imgVisible = false
            },
            //关闭xml窗口
            onXmlClose(){
                this.xmlVisible = false
            },
            //加载流程图片
            showImgDrawer(id) {
                const params ={}
                params.id=id
                this.$http.post(getProcessImage,params).then((res) => {
                    this.imgSrc = res.result
                    this.imgVisible = true
                }).catch(() => {

                })
            },
            //加载xml文件
            showXmlDrawer(id) {
                const params ={}
                params.id=id
                this.$http.post(getProcessXml,params).then((res) => {
                    this.xmlValue = vkbeautify.xml(res.result)
                    this.xmlVisible = true
                }).catch(() => {

                })
            },
            //切换流程状态并刷新页面
            changeFlowState(id,flowstate){
                //发起请求切换流程状态
                const params ={}
                params.id=id;
                //获取当前流程状态进行切换
                if(flowstate=='1'){
                    params.suspensionState=2;
                }else{
                    params.suspensionState=1;
                }
                this.$http.post(editProcessState,params).then(() => {
                    let data = [...this.tableData]
                    data.forEach((item) => {
                        if (item.id === id) {
                            item.suspensionState=params.suspensionState;
                            return item
                        }
                    })
                    this.tableData = data
                }).catch(() => {

                })
            },
            toggleAdvanced () {
                this.advanced = !this.advanced
            },
            handlePageChange ({ currentPage, pageSize }) {
                this.tablePage.pageNum = currentPage
                this.tablePage.currentPage = currentPage
                this.tablePage.pageSize = pageSize
                this.processQuerylList()
            },
            findProcessListBtn () {
                this.tablePage.pageNum = 1
                this.tablePage.currentPage = 1
                this.processQuerylList()
            },
            clearQueryAll () {
                this.queryParam = {}
                this.processQuerylList()
            },
            // 流程列表查询
            processQuerylList () {
                this.loading = true
                const params = Object.assign(this.queryParam, this.tablePage)
                setTimeout(() => {
                    this.$http.post(getProcessList,params).then((res) => {
                        const data = res.result.list
                        this.tableData = data
                        this.tablePage.total = res.result.total
                        this.tablePage.pageNum = res.result.pageNum
                        this.tablePage.currentPage = res.result.pageNum
                        this.tablePage.pageSize = res.result.pageSize
                        this.loading = false
                    }).catch(() => {
                        this.loading = false
                    })
                }, 200)
            },
        }
    }
</script>
<style lang="less" scoped>
</style>